<template>
  <div class="product">
    <div class="back">
      <img src="@/assets/images/left.png" alt="" @click="gotohome" />
    </div>

    <!-- 搜索框 -->
    <form action="/">
      <van-search
        show-action
        placeholder="视黄醇"
        @search="onSearch"
        shape="round"
      />
    </form>
  </div>
</template>

<script>
import { Search } from "vant";
import { ref } from "vue";
import { Toast } from "vant";

import "vant/es/search/style";

export default {
  //搜索框
  setup() {
    const value = ref("");
    const onSearch = (val) => Toast(val);
    return {
      value,
      onSearch,
    };
  },
  data() {
    return {};
  },

  components: {
    VanSearch: Search,
  },

  computed: {},

  mounted() {},

  methods: {
    gotohome() {
      this.$router.push("/home/");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";

.product {
  width: 100%;
  display: flex;
  position: fixed;
  top: 0;
  z-index: 999;
  .back {
    height: 130px;
    background: white;
    .border-bottom();
  }
  img {
    height: 46px;
    width: 25px;
    margin-left: 31px;
    margin-top: 40px;
  }

  //搜索框
  .van-search {
    position: fixed;
    top: 0;
    z-index: 666;
    width: 720px;
    background: white;
    height: 130px;
    padding: 30px 31px 27px 22px !important;
    .border-bottom();

    //输入框
    :deep(.van-search__content) {
      width: 500px;
      height: 60px;
      margin-left: 20px;

      //输入默认文字
      .van-field__control {
        height: 50px;
        font-size: 30px;
        .font_f_w ();
        color: #000000;
      }
      //搜索图标
      .van-field__left-icon {
        height: 50px;
        width: 50px;

        .van-icon-search::before {
          font-size: 35px;
          line-height: 50px;
        }
      }
    }
    //取消按钮
    :deep(.van-search__action) {
      margin-left: 20px;
      width: 100px;
      height: 50px;
      line-height: 50px;
      font-size: 32px;
      .font_f_w ();
      color: #000000;
    }
  }
}
</style>
